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(57) Abstract 

A web page has a player for playing media objects, a sequencer which displays a play list that defines an order in which media 
objects are played by the player, and a media access area for containing a plurality of graphical icons. Each graphical icon representing a 
media object, and the graphical icons can be manipulated by a user to modify the play list. For example, the media icons may be draged 
to the sequencer to add them to the sequencer. 
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A WEB APPLICATION FOR ACCESSING MEDIA STREAMS 

5 

BACKGROUND 

The present application relates generally to providing media streams from 
Internet sites. 

The World Wide Web (WWW) is conventionally conceived as a system in 

1 0 which a user navigates between text documents on different servers by means of 
hypertext links. Activating a hypertext link causes another page, also composed of 
text and links, to be delivered to the client computer. Thus, on the WWW, a user's 
experience is determined by the order in which the user clicks on links. 

In general, non-text objects are treated as illustrations placed on text pages. 

1 5 Although WWW standards include an open ended specification for handling 

multimedia files that allows media objects to be referenced by hypertext links, those 
references are treated no differently than hypertext links to pages and illustrations. 
Typically, three techniques are used to access multimedia files. First, a link can point 
to a special media file that requires a special player program to produce the images 

20 and sounds of the media file. Second, the link can point to a player program that starts 
independently of the web browser to play the media file. The interface provided by 
the player program controls the media file. Third, the link can point to a player 
program embedded in the page. In this case, the user can click on the link to choose 
which media file to play without leaving the page. However, the size of the image 

25 displayed and the controls available to the user are chosen by the web page designer. 

The currently available tools that can be used to synchronize the presentation 
of multimedia components include proprietary languages, such as Macromedia's 
Lingo and Apple's HyperCard, and scripting languages, such as ECMAScript 
(JavaScript). In recognition of the difficulty of multimedia authoring with the 

30 currently available tools, the World Wide Web Consortium (W3C) has proposed a 
new language called the Synchronized Multimedia Integration Language (SMIL). 

The WWW was developed for utility in the assembly and cross referencing of 
text content documents with user freedom in navigation. On the other hand, 
multimedia development has focused on interactive but canned content with limited 
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use options that are defined by the author. Thus, multimedia on the web has been 
subject to conflicting developmental pressures, and has not developed a coherent 
presentation format. 

5 SUMMARY 

In one aspect, the invention is directed to a web page with a player for 
playing media objects, a sequencer which displays a play list that defines an order 
in which media objects are played by the player, a media access area for containing 
a plurality of graphical icons. Each graphical icon representing a media object, and 

10 the graphical icons can be manipulated by a user to modify the play list. 

Implementations of the invention may include the following features. The 
graphical icon includes an indication of a media type of the media object and text 
describing content of the graphical object. A graphical icon can be dragged from 
the media access area to the sequencer to add the media object represented by the 

15 graphical icon to the play list. The sequencer can display one of multiple play lists, 
and the user may switch between play lists by selecting a tab associated with the 
play list. For each graphic object in the play list, the play list box may contain a 
copy of the graphical icons representing the graphical object, a checkbox to control 
whether the player will play the graphic object, and a pop-up menu to provide 

20 information about the graphic object. The sequencer and media access area may be 
implemented with scripted DHTML. The media access area may include an 
expandable and collapsible outline of subjects, and the media icons may be 
arranged in lists in the outline. The media access area may include a tab for each 
subject at a top level of the outline, and the user can switch between subjects by 

25 selecting a one of the tabs. The media access area may display one of a plurality 
of outlines, and the user can switch between outlines by selecting a tab. The player 
may include a control panel and a draggable image display window. The image 
display window may include a home button to return the image display window to 
a home position on the web page, an image area, a handle, a button to hide the 

30 image area, and a size lock button to prevent the image display window from 

expanding beyond a default size. The web page may further include a site-driven 
area to display a banner. The banner may be synchronized with the media object 
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being played by the player, and a media object may be associated with the banner.- 
The user may change the play list to play the media object associated with the 
banner by manipulating the banner. Dragging the banner to the sequencer may add 
the media object associated with the banner to the play list, and dragging the 
5 banner to the image area of the player may play the media object associated with 
the banner. The banner may include a pop-up menu to display information about 
the media object associated with the banner. 

In another aspect, the invention is directed to a method of operating a web 
page. Multiple sources of streaming content are displayed to a user, and user input 
10 is received to select a playing order for the sources of streaming content. The 
playing order is stored, user input is received to start delivering the streaming 
content to the user, and the streaming content is presented to the user in the stored 
order. 

In another aspect, the invention is directed to an Internet site having a first 

1 5 database to store information about a plurality of media objects, a second database to 
store information about how the media objects are to be presented on a web page, a 
third database to store information about a plurality of users, and an application server 
for communicating with a client running the web page. 

Advantages of the invention may include one or more of the following. The 

20 user can locate and control streams of multimedia content in real time without 

accessing different web pages or surrendering control to a media player program. A 
user can define and assemble multiple sequences of media objects, particularly 
sources of streaming content. The user can manage a persistent personal collection of 
media objects from a network client. The user can gather additional streaming 

25 content while a media object is playing, and can modify and create sequences while a 
media object is playing. The user can add and remove media objects from a 
sequence, can deselect media objects to prevent them from playing without removing 
them from a sequence, and can switch between different user defined sequences. 
New media objects can be preloaded into a sequence based on a personal preference 

30 or interest profile defined by the user. Individual user histories (as defined by the 
order in which a user adds media objects to sequences and plays the media objects) 
can be used to generate an outline organized by user-defined tabs and dates. Users 
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can exchange play lists and player combinations by electronic mail. 

The details of one or more embodiments of the invention are set forth in the 
accompanying drawings and the description below. Other features and advantages of 
the invention will become apparent from the description, the drawings, and the 
5 claims. 



BRIEF DESCRIPTION OF THE DRAWINGS 

Fig. 1 illustrates a media access web page according to the present invention. 
1 0 Figs. 2 A-2C illustrate the use of a media icon access panel from the web page 

of Fig. 1. 

Fig. 3A-3B illustrate the step of dragging a media icon from the access panel 
to a sequencer from the web page of Fig. 1 . 

Fig. 4 illustrates the sequencer containing several media icons. 
1 5 Fig. 5 illustrates the use of a media object pop-up menu. 

Fig. 6A-6C illustrate the manipulation of multiple play lists by the sequencer. 

Fig. 7 illustrates the object player from the web page of Fig. 1 . 

Fig. 8A-8C and 9A-9C illustrate the operation of the site-driven area from the 
Internet site of Fig. 1. 

20 Fig, 1 0 illustrates a pageless Internet site for generating a media access web . 

page. 

Fig. 1 1 illustrates a method performed when a user contacts a media access 
web page server. 

Fig. 12 illustrates a method performed when a user interacts with the media 
25 icon access panel. 

Figs. 13A-13C illustrate methods performed when a user switches or changes 
tabs in the sequencer. 

Fig. 1 4 illustrates a method performed when a user plays a media object from 
a play list in the sequencer. 

30 Fig. 1 5 illustrates a method performed when a user drags a banner from the 

site-driven area. 

Fig. 1 6 illustrates a method performed when a user activates a media icon pop- 
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up menu. 

Fig. 17 illustrates a media icon pop-up menu. 

DETAILED DESCRIPTION 

5 Fig. 1 shows a media access web page 1 0 generated by an Internet site that is 

particularly suited for accessing multimedia streams. The Internet site is "sequence- 
oriented", i.e., the user controls the sequence in which multimedia streams are 
presented. In addition, the Internet site is "pageless", in that media streams are 
delivered to the user without the user having to navigate to different pages. The 

1 0 media streams may be a variety of media types, such as text audio, images, 

animation, video, executable code, or any combination of media types. The Internet 
site is a media-type neutral system, i.e., it treats different media types, such as audio 
and video, in a similar fashion. 

The building blocks of the Internet site include playable media content units, 

1 5 called "media objects", and graphical representations, of the media content units 
called "media icons". The user manipulates the media icons to create an individual 
sequence, i.e., a play list, of media objects. The web page 10 presents the media icons 
with text and/or graphics to assist the user in determining how to manipulate the 
media icons. 

20 The pageless Internet site is an inversion of conventional web site desisn. In 

conventional web site design the media object is the last link in a long chain of pages 
and links. The setting, context, meaning, and relevance of the media object are 
established in hypertext, and the media object is an adornment for the hypertext. In 
contrast, in the pageless Internet site, the media object is the starting point. The 

25 pageless Internet site is media-oriented, as opposed to being text-oriented with media 
annotations. In short, the principle of organization of web page 10 is the relationship 
between media objects, rather than the relationship between pages. 

As shown in Fig, 1, the media access web page 10 has four functional areas, 
including a media icon access panel 12, a sequencer 14, an object player 16, and a 

30 site-driven area 1 8. The media icon access panel 12 organizes media icons into a 

hierarchical outline or list, and supports searches for media objects. The sequencer 14 
allows the user to select media icons from the media icon access panel 12, and to 
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create and modify one or more user defined play lists. The object player 16 plays the 
media objects in the order defined by the play list. In addition, the object player 1 6 
can control the play list and the individual media objects in the play list. The site- 
driven area 18 presents site-driven graphics synchronized with streaming content that 
5 responds to user actions and user selected content. The graphics can also be media 
icons representing more media objects. The web page 1 0 can be implemented with 
JavaScript and HTML 4.0, and can be accessed with a web browser, such as 
Microsoft Internet Explorer 4.0. Each of the components of the web page 10 will be 
described in greater detail below. 

10 The media icon access panel 12 has a series of subject matter tabs 22 arranged 

along an edge of the panel. To begin browsing the content of the site, the user selects 
one of the subject matter tabs 22, for example, by clicking on it with a mouse 
controlled cursor. As shown in FIG. 2A, clicking on a subject matter tab 22 causes 
the top level of an outline 24 to appear as a bulleted list containing bulleted items 26. 

1 5 In addition, clicking the subject matter tabs 22 causes outline item tabs 28 to appear at 
the bottom of the media icon access panel 12. Each outline item tab 28 corresponds 
to one of the top level bulleted items 26 in the outline 24. 

As shown in FIG. 2B, clicking on either the text of a bulleted item 26 or the 
corresponding outline item tab 28 at the bottom of the media icon access panel 1 2 will 

20 cause the next level of the outline to be displayed as a bulleted sublist 29. Clicking 
on a bulleted item in a sublist causes the next lower level of the outline to be 
displayed. In order to manage large outlines without excessive scrolling, the sections 
of the outline will expand and collapse so that only one item of each level of the 
outline is expanded at a time. For example, FIG. 2B shows the "News" section of the 

25 outline has been expanded. Clicking on any bullet at the same level, such as the 

"Sports" bullet, would expand the outline to show the items in that bullet, but would 
also close the "News" section. 

As shown in FIG. 2C, the lowest level of the outline is a list 36 of media 
icons 30. Each media icon 30 represents a media object. Each media icon includes a 

30 graphic icon 32 indicating the media type, such as audio, video, text, executable code, 
graphic, or unknown, of the media object, Each media icon also includes 
accompanying text 34 to briefly explain the content of the media object. When a 
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cursor 42 moves over a media icon, the media icon is highlighted to indicate that it is 
selectable. Clicking on a media icon 30 does not open another level of the outline. 
Rather, as shown in FIG. 3 A, holding the mouse select button down when a media 
icon is highlighted creates a copy 40 of the selected media icon, in a contrasting color. 
5 The user can drag the media icon copy 40 with the cursor 42. As shown in FIG. 3B, 
the media icon copy 40 can be dragged out of the media icon access panel 12 and 
dropped into the sequencer 14. 

As shown in FIG. 4, the sequencer 14 includes a play list box 44, a play list 
button 46, and control buttons 48. When the copy of the media icon is dragged near 
1 0 the sequencer 1 4, it will snap into the play list box 44. By dragging media icons from 
the media icon access panel 12 into the sequencer 14, the user creates a sequence or 
play list 50 of media icons representing a playing order for the media objects 
associated with the media icons. Media objects can also be added to the play list 50 
by double-clicking on the media icon 30 in the outline 24. Each element in the play 
1 5 list 50 includes the copy 40 of the media icon, a checkbox 54, and a pop-up icon 56. 
The user may select one of the media icons 30 in the sequence by clicking on it to 
make it the current media icon 52. The current media icon 52 is highlighted in yellow 
and represents the media object that is playing, or that will play if a stopped player is 
started. If the number of elements in the play list 50 exceeds the vertical height of the 
20 play list box 44, a scroll bar may be created to scroll through the play list. 

The user can modify the play list 50 to arrange the media objects into a 
desired playing order. For example, the user can change the order of media icons by 
dragging the media icon copy 40 inside the play list box 44. Clicking on a remove 
button 60 below play list box 44 deletes the current media icon, and clicking on a 
25 clear button 62 removes all media icons from the current play list 50. Unchecking the 
checkbox 54 to the left of the media icon copy 40 will cause that media object to be 
skipped when the play list is played. This permits the user to select a subset of a play 
list 50 to be played. 

As shown in FIG. 5, additional information about each media object is 
30 accessible by clicking on the pop-up icon to generate a pop-up menu 58, This 

information will depend on the nature of the media object, and can be determined by 
the manager of the Internet site. For example, the pop-up menu can display 
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information about image size, media type and frame rate. 

As shown in FIG. 6A, the user can create and organize multiple play lists by 
use of the play list button 46. When the user clicks on the play list button 46, a pop 
up menu 70 appears with four options: Create, Delete, Rename, and Go To. The 
create option adds a play list, the delete and rename options remove and rename a 
play list respectively, and the Go To option switches to a different stored play list. As 
shown in FIG. 6B, each new play list creates an additional tab 72 at the top of the play 
list box. The new play list 50 may be populated by dragging media icons from the 
same or different branches of the outline 24. The user created play lists are similar in 
function to the favorites or book marks web browsers have for web pages. The pop- 
up menu 70 may also include a Play All option which causes every play list to be 
played. In addition, the pop-up menu 70 may include a Play Many option which 
allows the user to select a group of play lists, e.g., by selecting the play list tabs 72, 
and to play the media objects in the group. The functions of the play list button 46 
could be accessed by other interactive features on the web page. 

The pop-up menu 70 on the play list button 46 may also include a mail feature 
that permits users to select and exchange play lists. The mail feature may also be 
invoked by a separate button, or by dragging media icons from sequencer or media 
icon access area to a mailbox icon. The media objects in the mailbox may later be 
mailed one or several receipients. 

As shown in FIG. 6C, when the addition of a new tab 72 causes a tab at the 
opposite end to "fall off the play list box 44, a triangular corner marker 74 appears to 
indicate the direction in which there are more tabs to view. The user can click on the 
corner markers 74 to cause the tabs to shift left or right, as appropriate, to display the 
next play list tab. 

As shown in FIG. 7, the object player 16 is used to play the currently selected 
media object from the play list 50 in the sequencer 14. The object player includes an 
image display window 80 and a control panel 82. The object player 16 can use any 
program that can be embedded in a web page that presents media objects. Examples 
of streaming media programs that can be embedded are QuickTime™, RealMedia™, 
and Microsoft Media Player™. Streaming media players, such as the illustrated 
RealMedia Player, include the control panel features, such as a stop button 100, a 
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pause/play button 102, a previous button 104 and a next button 106. a vertical-slider ' 
control 108 provides audio volume control, and a horizontal slider control 1 1 0 
provides fast forward/rewind control and indicates the amount of the stream that has 
been and remains to be played. A display panel 1 12 presents the current status of the 
5 media object, e.g., playing or paused, and a clock 1 1 4 shows the total duration of the 
multimedia object and the elapsed time. 

The next button 106 works with the play list 50 in the sequencer 14 to cause 
the currently playing media object to stop and to cause the media object represented 
by the next checked media icon in the play list 50 to start playing. Similarly, the 
1 0 previous button 1 04 causes the currently playing media object to stop and causes the 
media object represented by the previous checked media icon in the play list 50 to 
start playing. When a new media object starts playing, it is highlighted in yellow as 
the current media icon. If there is no checked media icon in the play list before the 
current media icon, the previous button 104 is dimmed, and if there is no checked .• 
i 5 media icon is the play list after the current media icon, the next button 1 06 is dimmed. 

The image display window 80 includes a handle 90, an image size lock button 
92. a window shade button 94, and an image swap button 96, The image display 
window' 80 has a home position in the upper left corner of the media access web page 
10. However the user can reposition the image display window 80 by clicking on the 
20 handle 90 and dragging the image display window. When the image display window 
80 is dragged out of its home position, it floats above the other areas of the web page 
10 and the sequencer 14 expands to make use of the freed space to provide a larger 
play list box. On the other hand, if the image display window 80 is dragged back to 
its home positions, it will snap back to the home position and the sequencer 14 will 
25 shrink to its original size. 

The user can click on the image size lock button 92 to set and release an image 
size lock that restricts the maximum size of the image display window 80. When the 
image size lock is released, the image display window 80 will resize to the default 
size of the particular media object. ' On the other hand, if the image size lock is set, 
30 the image display will not grow larger than the default size of the image display 
window 80. However, the first time in a session when an image that is larger than 
the image display window default size becomes current, a dialog box asks whether 
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the user wishes the display to expand to the normal image dimensions required by the 
media object. If the user agrees, then the image lock is released and all images larger 
than image display window default size will display full size. The size of the image 
display window 80 may also be set by dragging on the window edges. 

Clicking on the window shade button 94 removes the image but leaves the 
handle 90. Clicking the window shade button 94 again restores the image. This is 
useful for quickly seeing what is beneath the image without repositioning it. The 
position swap button 96 changes the position of the image display window 80. When 
the image display is floating, clicking the position swap button 96 returns the image 
display to the home position. Clicking the position swap button 96 when the image 
window is in its home position returns it to is last floating position. The hide video 
button 98 hides the whole image display window 80, including the handle 90. For 
example, the image display window may be hidden to enlarge the sequencer 14 when 
working with audio-only media objects or if no video image is desired. The user 
redisplays image display window 80 by clicking the show video button below the 
sequencer 14. The image size lock, image shade, image swap buttons and hide video 
on the handle 90 of the image display window 80 are repeated below the sequencer 14 
as a lock/unlock button 68, an open/close button 66, an away button 69, and a 
hide/show video button 64, respectively (see FIG. 4). 

As shown in FIGS. 1 and 8 A, the site-driven area 18 is a region of the web 
page 10 that is controlled primarily by the server in response to user actions. The 
contents of this synchronized display are not chosen by the user, but instead are 
determined by the Internet site application program. The Internet site can use the site- 
driven area 1 8 to present information, e.g., a rotating banner, associated with media 
objects that are playing. The contents of site-driven area 1 8 can also be based on user 
preferences, a user history, or a user profile. For example, when the media access 
web page 10 first loads, and if no media objects are playing, the site-driven area 1 8 
can show a conventional "rotating" advertising banner 1 20. However, as shown in 
FIG. 8B, when a media object is playing, the site-driven area 18 shows a rotating 
banner 122 that is specific or "synchronized" to the media object. For example, if the 
user plays a clip from a music video, an advertising banner for a CD from the same 
record label can be displayed in the site-driven area 1 8. Thus, the synchronized 



WO 00/28396 PCT/US99/26258 

11 

banner 122 provides information in parallel with the playing media object. 

Each media object represented in the media icon access panel 12 can have 
none, one, or two or more synchronized banners 122. For example, one banner can 
reference a source (e.g., the web page where the media object was found) for the 
5 media object, and another banner can reference a sponsor (e.g., the company whose 
product is advertised) for the media object. 

Each synchronized banner 122 can be associated with a playable media object. 
If a media object is associated with the banner 122, an indicator 130 appears in the 
frame of the banner 122. The indicator 130 can show the type of the media object 
10 (e.g., video, audio, etc.) with a graphical icon 102. The user can play the associated 
media object by dragging the banner 122 into the image display window 80 of the 
object player 1 6. In addition, the user can add the associated media object to the play 
list 50 by dragging the banner 122 into the play list box 44 of the sequencer 14. 

As shown in FIG. 8C, dragging the banner 122 creates a copy 1 32, which acts 
15 as a media icon. When the dragged banner contacts the image display window 80, 
the image display border turns yellow to indicate it will play a new media object. 
Dragging the banner copy 132 into contact with the image display window 80 causes 
the object player to pause, and releasing a dragged banner copy 132 in contact with 
the image display stops the playing of the current object and starts playing the object 
20 associated with the banner. The highlight on the current media icon 52 in the play list 
50 turns red to indicate that the play list is stopped. However, a media icon for the 
new media object is not added to a play list. Instead, once the media object associated 
with the banner is finished playing, the play list resumes playing with media object 
that was interrupted by dragging the banner. 
25 As shown in FIGS. 9A and 9B, the site-driven area 1 8 can display information 

related to the associated banner or media object. This is indicated by a button or icon 
134 appearing in the site-driven area 18. If the user clicks on the button 134, an 
expanded site-driven area 136 is opened. The expanded sponsor area may provide 
additional information (if any is available) details regarding the subject matter of the 
30 banner. For example, a more extensive advertising page may be presented. 

The user can click on the media object indicator 130 on the banner 122 to 
open a pop-up menu 138. The pop-up menu functions are defined by the banner 122. 
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Selecting "Play" can have the same effect as dragging the banner to the image 
display, i.e., the media object is played immediately. Selecting "Play Later" causes 
the media icon for the media object to be added to the end of the current play list 50. 
Other menu options may permit the user to visit the sponsor's web site or purchase 
5 products shown during presentation of the media object. 

When the media access page loads, the sequencer 14 will be empty if the user 
has not visited the site before and if the site has not pre-loaded the sequencer 14 with 
any media icons. As the user loads the sequencer 14 with media icons, a record of the 
sequencer's contents is saved on the site server. This session state is preserved 

1 0 between visits, so that when the user returns to the site, the sequencer will contain the 
same content with which the user ended the previous session. In addition, the site 
managers have the option of selectively creating and preloading play lists and tabs for 
each user. Users can be notified about content which is no longer available and it can 
be removed from user play lists. 

1 5 In addition, the user can create a personal preference profile that determines 

content to be preloaded into the sequencer 14. For example, while browsing through 
the outline 24 in the media icon access panel 12, the user may select an interface 
feature, e.g., a button, to indicate that the user is interested in receiving content related 
to the subject matter currently displayed in the outline. When the user returns to the 

20 site, the sequencer will be preloaded with media icons that fit the user's personal 

preferences. The user preference profile can be complex, and can be generated using 
the taxonomy of the outline. The result of the preload may be a topical set of play 
lists in the categories established by the user. Multiple interface methods can be used 
to generate the profile. An appropriate interface method may be selected depending 

25 on the nature of the content. The personal preferences selection method may be 

accessed by a top level tab of the media icon access panel 1 2, or otherwise may be a 
primary user interface. 

The media icon access panel 12 may permit a user to view a history of the 
user's media object selections. For example, one of the tabs on the media icon access 

30 panel can display an outline of all play lists that have been created or all media 

objects that have been added to the sequencer. The outline may be organized by date, 
tab name, or current play list tab names. Thus, over time, the creation of play lists 
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and play list tabs sequencer tabs gives the user the option to view a personalized 
access area, e.g., an outline 22 in the described implementation, on the media icon 
access panel 12, 

The selection and playing of media objects is tracked, so that the user may 
5 later request previously played media objects, e.g., by date of selection or playing, or 
reconstituting play lists that have been deleted from her sequencer. Alternately, the 
user may apply a filter based on prior selections. For example, the user may elect to 
view only media objects that have not been played, or only media objects that were 
played last week. The user can create a personal preference that preload previously 

1 0 created play lists into the player. 

Thus, users can interact with content that is pre-loaded in the sequencer (either 
by the site-manager or based on personal preferences), they can locate new media 
objects in the media icon access panel 12, organize the media objects into a play list 
50 in the sequencer 14, exchange play lists with out users, and elect to review media 

1 5 objects that are offered in the sponsor area during the playing of each media object. 

As shown in FIG. 1 0, a pageless Interne* site 1000 for generating a media 
access web page includes server components 1002 and browser components 1004. 
Databases, including a content database 1010, an interface database 1012, and a user 
database 1014 are associated with the server 1002. 

20 The content database 1010 contains information about the media objects that 

will be represented by media icons in the pageless Internet site. For example, the 
content database 1010 can include, for each item of content, the media type, i.e., 
video, audio, animation, and the like, a uniform resource code, a short text 
description, such as the title of the media object, the frame rate, duration and image 

25 size. The content database may also contain information about the origin of the media 
object, such as the author, copyright source name, source web site, sponsor name, and 
sponsor web site. If the media object represents an item that can be purchased, then 
the description and price of the item may also be stored in content database 1010. 
The content database may be updated periodically by the Internet site manager to 

30 provide new media objects to users, and to remove media objects that are no longer 
available. 

The interface database 1012 contains the information required to support the 
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generation of user interface elements in the media access web page. Specifically, the' 

interface database 1012 includes tables that are used by queries to construct the 

outline 24 in the media icon access panel 12. The interface database 1012 includes a 

master outline reference table that contains one record for each method of 

5 constructing a level of the outline. Each record contains information to define the 

format of the level and to construct queries in the client that will obtain the level 

below the level currently being displayed. One implementation of the master outline 

reference table includes the following fields 

Levelcode a label for the outline level type 

10 Levelcodenext the label for the next lower outline level type. 

Querycode a label for a structured query language (SQL) formal 

query 

Drag determines whether the elements on the level are 

draggable 

15 Color determines the. color of the elements on the level 

Tab determines whether the elements on the level should be 

repeated in tabs, e.g., bottom or side tabs 28 
Table 1-2 names, for up to two tables used in the query 

Fieldl -1 0 names for up to ten fields used in the query 

20 Sort a sorting order for elements on the level 

Adjcode a name for the block of HTML display script 

Writecode determines whether the level writes, overwrites or adds 

to an existing level 

25 The user database 1014 maintains information about the content and the status 

of the play lists in th? sequencer. For example, the user database 1014 may include 
the user's name, password and other personal information, as well as user profile and 
preference information that might be developed by the pageless Internet site manager. 
The user database 1014 can also contain a list of the play lists available to the 

30 sequencer 14, a list of the media objects in each play list 50, and identification of the 
currently selected play list and media object. The user database 1014 can also 
maintain a history of the use of the web page 1 0 by the user, e.g., by tracking the 
media objects put into the sequencer 14 and the order in which they are played by the 
player 16. 

35 The server components of the pageless Internet site 1 000 also include a web 

server 1020 and one or more media servers 1025, In brief, the web server 1020 
receives queries from the client, passes the queries to the databases, receives the 
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resulting recordsets from the databases, and delivers those recordsets back to the 
client. The media servers 1025 host the media objects and manage the serving of 
streaming media objects. 

The web server 1020 serves the media access web page into a client 1030. a 
5 browser running on the client interprets the web page and displays it to the user. The 
web page contains the program that displays the interface controls, responds to user 
events, sends queries and updates to the web server 1020, receives and manipulates 
recordsets from the web server 1 020, formats data for display, and controls the media 
player object. The web page also includes a number of data source objects (DSOs) 

10 1 034. In general, there are at least two independent database connections for the 

client. One connection is to the interface database that views the content database, and 
the other connection is to the user database and is bi-directional to the sequencer in 
support of user activity and history. Data in the data source objects can be bound to 
dynamic hypertext markup language (DHTML) objects so that changes in the DSO 

1 5 data result in updates to ihe client display. Specifically, the web page will include a 
sequencer DSO that is bound to the sequencer DHTML. The data source objects 
1034 can pass query statements, e.g., in structured query language (SQL), to the web 
server 1020, and receive recordsets in return. 

The DHTML for the media icon access panel 12 includes an array with an 

20 entry, e.g., a row, for each element in the outline 22 that is being displayed. Each 
entry contains all the information necessary to construct and format the outline 
element, and, if the element is a media icon, all the information about the media 
object, including type of the media object, the banners associated with the media 
object, the pop-up menus, and the media objects associated with the banners. 

25 As shown in FIG. 1 1 , when the media access web page is loaded, it checks for 

the existence of a cookie that can identify the user to the web server 1020 (step 1 102). 
If a cookie is found, then the client queries user database 1014 in the server for the 
contents of the sequencer 14 at the end of the user's last session (step 1 1 04). The 
server responds to this query and the sequencer DSO is loaded with the sequencer tab 

30 categories and play lists 50 (step 1 1 06). In addition, media objects may be pre-loaded 
into the sequencer DSO based on an individual preference profile (step 1 108). For 
example, a user may request to receive news updates, and this information would be 
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stored in the user database 1014. Media objects added to the site since the user's last' 
visit that fit the individual preference profile could be loaded into a "new" category 
on the sequencer tab. Next, site specific media objects may be pre-loaded into the 
sequencer DSO (step 1110). For example, tabs and play lists that the pageless 
5 Internet site manager wishes to be displayed when the user visits the site may be 
loaded. Next, the initial state of the access panel 12 is determined (step 1112). 
Specifically, a pre-defined initial query is sent by the client to the interface database 
1012, and the interface database responds with a recordset that describes starting state 
of the access panel. The outline information and top tab names from this recordset 

1 0 are loaded into the access panel DSO. Finally, the site-driven area is activated to 
commence conventional banner rotation (step 1114). 

If the user has not visited the site before and, consequently, no cookie is 
located, a new user is created in the user database 1014 (step 1 120). The server 
. generates a new user identification code (step 1 122) and writes a cookie with the user 

15 identification code which is delivered to the client (step 1 124). The application server 
1020 then commences loading the site specific media objects into the sequencer DSO 
in step 11 10. 

Figure 12 illustrates the steps performed by the pageless Internet site 1000 
when the user is navigating through the outline in the access panel 12. In brief, 
20 clicking on a tab or outline line in the new media icon access panel 12 generates an 
SQL query of the interface database 1012 which returns a recordset containing the 
elements to be displayed and the format. 

As mentioned above, the interface database includes a record for each element in the 
outline (whether shown on media icon access panel 12 or not), and the array in the 

25 access panel DHTML includes an entry for each element 26 that is currently visible 
on the media icon access panel 12. Specifically, each entry in may contains the level 
of the element, the text associated with the element, the format for the element, and 
sufficient information to construct a query to obtain a recordset from the interface 
database for the level below the displayed element. If an element in the displayed 

30 outline 24 is clicked, a script is run which generates a query that is sent to the 

interface and content databases. The databases return a recordset that is stored in a 
temporary access panel DSO. The recordset is copied to the DHTML array, and the 
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access panel DSO is cleared. Information from the DHTML array is used to write, 
add or overwrite DHTML to a DHTML span which describes a display region on the 
media icon access panel. Since the formatting information is taken from the interface 
database, the media icon access panel 12 can be transformed without reloading any 
5 page or frames. 

If the user clicks on a tab 22 or an outline line 26 (rather than a media icon 
30), the outline is collapsed so that other outline elements at the same level are closed 
(step 1202). A wait message, e.g., "retrieving element," may be displayed to the user 
(step 1204) while the client retrieves the SQL query data from client memory (step 

10 1206), generates an SQL query that is sent to the application server 1020 (step 1208) 
and receives a resulting recordset which is copied to a DHTML array (step 1210). 
The new outline is formatted and displayed (step 1212). 

If the user clicks on a media icon 30, the media icon is copied to a DHTML 
layer that represents the top layer to be displayed by the client (step 1220). The color 

1 5 of the media icon is changed to a "dragging" color. The client then detects whether 
the media icon has been dragged to the sequencer (step 1222). If the mouse button is 
released before the media icon overlaps the sequencer 14, then the copied media icon 
is removed from the drag layer and disappears (step 1224). On the other hand, if the 
mouse button is released when the media icon overlaps the sequencer 14, then the 

20 record associated with the media icon is copied from the access panel array to a 
JavaScript array and appended to the sequencer DSO (step 1226). Thus, all the 
information for the media object associated with the media icon, including the media 
object's pop-up menu, associated banners, and banner pop-up menus is copied from 
the access area array to the sequencer DSO when a user adds a media object to a play 

25 list. Since the play list 50 is data-bound to the sequencer DSO, updating the recordset 
of the sequencer DSO adds a media icon to the bottom of the play list 50. Then the 
sequencer DSO updates the user database 1014 (step 1228). 

As shown in FIG. 13 A, when the user clicks a new sequencer tab 72 (step 
1300), the sequencer DSO submits changes in the current tab play list to the user 

30 database 1012. This change also resets the source for the object player (step 1 304). 
Thus, the object player is ready to play the first checked object in the new play list 50. 
The play list for the new tab is filtered and loaded from the sequencer DSO recordset. 
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Because the play list 50 is bound to the sequencer DSO, it shows the media objects 
associated with a new tab. 

If the user clicks on the remove button 60, the selected media objects record is 
deleted from the sequencer DSO, and the corresponding bound DHTML object is 
updated accordingly. Similarly, if the user clicks on the clear button 62, all media 
objects records from the current tab assignment are deleted from the sequencer DSO, 
thereby updating the corresponding bound DHTML play list. In both cases, the 
sequencer DSO submits changes in the play list to the user database 1014. 

As shown in FIG. 1 3B, changes to the sequencer tabs using the create, delete 
or rename functions in the pop-up play list menu 70 cause changes in the 
corresponding records in the sequencer DSO. The DHTML objects bound to the tab 
sequencer DSO are also rewritten to update the visual appearance. In addition, the tab 
sequencer DSO submits the changes to the user database 1014. 

As shown in FIG. 1 3C, the Javascript embedded in the web page 1 0 includes a 
tab display manager 1350 that is activated when the user clicks a left tab button, a 
right tab button, creates or edits a tab, or when the user database is first loaded into 
the sequencer DSO. The tab manager 1350 stores variables representing the first and 
last visible tabs. The tab manager 1350 adds the left or right tab corner marker 
buttons 74 to the left or rightmost tabs when there are more tabs available to the left 
and/or right. For example, assuming the user has clicked the tab-left button, the 
variable representing the first tab is decremented by one (step 1 352). Then the 
variable representing the last tab is set by setting it equal to the first tab and 
incrementing it until either the last tab is reached or no more tabs fit on the access. 
The tab display manager can calculate whether tabs fit on the play list box by storing 
the horizontal length of the play list box 44 and the horizontal length of each tab 72. 
The visible tabs are positioned (step 1356) and the tab left and tab right buttons are 
reset depending on whether there are additional tabs to the left or right. Similarly, if 
the user clicks a right tab button, then the variable representing the last tab is 
incremented by one (step 1362) and the variable representing the first tab is 
determined by setting it equal to the last tab and decrementing it until either the first 
tab is reached or no more tabs fit on the play list (step 1 364). Then the visible tabs 
are positioned (step 1 366) and the left and right tab buttons are reset (step 1358). 
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As shown in FIG. 14, when a user plays a media object from the play list 50, 
e.g., by pressing play button 85 (step 1400) f a JavaScript function is triggered which 
generates a user interface command that is sent to the media player object 1036. In 
response, the media player object 1 036 signals the appropriate media server 1 025, 
5 which retrieves a media stream from the source specified in the media icon record 
(step 1402). Rotation of the default banner stops (step 1404), and the sponsor's URL 
is retrieved from the sequencer DSO (step 1406). In addition, the specific banner 
associated with the media object, e.g., a sponsor banner or a source banner, is 
displayed in the site-driven area 1 8 (step 1410). Once the object player begins 
10 buffering the media stream, the media type and image size are determined from the 
media icon data source object (step 1412). If the media object image size is greater 
than the image display window default size, then the user is asked if he or she wishes 
to expand the image display (step 1414). If the user agrees, or if the image size is 
smaller than the image display window default size, then the image display is resized 
•15 to fit the actual image size of the media object (step 1416). Otherwise, the image 
display is left at the image display window default size (step 1418). Next, if the 
image display is located at the home position (as determined in step 1420) then it is 
centered (step 1422). Otherwise, the image display is not moved (step 1424). 
Once the object player buffers the media stream, the media object starts 
20 playing (step 1430). When this occurs, the checkbox 54 associated with the media 
object is unchecked by changing the corresponding check field in the sequencer DSO 
(step 1432). Changing the sequencer DSO causes the bound DHTML checkbox to be 
unchecked (step 1434). When play ends (step 1440), the sequencer finds the next 
checked checkbox in the play list 50 (step 1442). The media icon associated with this 
25 media object is highlighted (step 1444), the URL of the new media object is loaded 
(step 1446) and the new media object is played (step 1448) thereby returning to step 
1402. If the sequencer cannot locate another checked checkbox in the play list 50, the 
object player stops (step 1450) and the site-driven area 18 returns to default banner 
rotation (step 1452). 

30 As shown in FIG. 1 5, if the user clicks on the banner 122, a copy of the banner 

is moved into the top layer DHTML so that the banner can be dragged (step 1502). If 
the last button is released when the banner is touching the image display 80 (as 
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determined in step 1504) or if the banner is touching the sequencer play list box 44 
(as determined in step 1 506), the URL of the media object associated with the banner 
is retrieved from the sequencer DSO current record (step 1 508). If the mouse is 
released elsewhere, then the banner will disappear (step 1510). If the banner was 
5 moved to contact the sequencer, a new record is created in the sequencer DSO (step 
1 520). Identification codes for the user and tabs are copied into the new record (step 
1522) and the banner media object data is also copied into the new record (step 1524). 
Finally, the DHTML play list table is updated with the new sequencer DSO record 
(step 1526). 

10 On the other hand, if the banner is moved to contact the image display window 

80, then the object player 1 6 is paused (step 1 530). If the banner is moved away from 
the image display window 80 without releasing the mouse button (as determined in 
step 1 532), then the object player 16 resumes playing (step 1 534) and the banner may 
continue to be dragged around the screen. However, if the mouse button is released 

1 5 when the banner is touching the image display, then the current media icon 52 in the • 
play list 50 is highlighted in red to indicate that it has been interrupted (step 1 540), 
and the media object associated with the banner is played (step 1 542). When the 
media object associated with the banner has stopped playing, the current media icon 
52 is changed back to a yellow highlighting (step 1 544 ) and play is restarted (step 
20 1546). 

As shown in FIG. 1 6, when the user clicks on indicator 1 30 (step 1 600) or 

button 56, a sponsor or source pop-up string is retrieved from the sequencer DSO 

current record (step 1602). The string is an encoded "menu description notation" 

(MDN) string that describes the hierarchy of menu items, the appearance of the menu 

25 and the programmed behavior for the menu items. Specifically, the string is an 

ordered sequence of delimited fields. The MDN string is an economical means to 

transport the instructions for building and defining the content of pop-up menus from 

the server to the client or between client feature datastores. Each menu item includes 

the following fields: 

30 Caption The text to be written in the menu item 

Command a code representing a predefined command to be executed by 
the web page 

Parameter Parameters for the command. Multiple parameters may be 
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5 



Image 
Separator 



Trigger 



Status 



delimited by a tilde character "~ \ 

Identifies the type of mouse event that triggers the command, 

such as "Rollover" or "Click" 

Indicates how a menu items should be displayed if the 

command is not available, e.g., dimmed, grey text, or removed. 

The URL for a graphic to appear in the menu item 

A horizontal relief line. 



Each field may be delimited by a character, such as the "caret" character " A ", 



1 0 and menu items may be delimited by a "bar" character "|". In addition, two control 
characters are used to define the hierarchical relationship between the menu items. 
Specifically, one control character, e.g., a "greater-than" character ">", indicates a 
step to a super-menu of the current menu item, whereas the other control character, 
e.g., a "less-than" character "<" indicates a step to a sub-menu of the current menu 

1 5 item. The MDN handles null data fields and truncated strings by assuming a default 
behavior. 

For example, the pop-up menu 56 shown in FIG. 17 may be generated by the 
following MDN string: 

^PreviewAAAADAA^i v j ew A P A http://2 05. 1 80.55.240/dataplus/foxsearchlight5 
20 23/server/docs/filmstrips/realmedia/1024/63jpg^R / ^|Description A |<| 

Read A D^^R^f>| /w ^^ Bums^t^R^H 

Author AAAA D AA |<|Fox Searchlight^N A R^HCopyright AA ^D AA j<| AAA N A R /NA |>| 

Modify Date AAAA D AA |<|6/19/97 9:30:50 AM AAA N A R AA p > |Deta i ls ywvA D AA j<j 

Image Size^D^Jl 12 Height x 160 Width^N^^JMedia Type AAAA D AA |<| 
25 Video^N^^IFrame Rate^D^l 0 fps^^R^IDuration^D^ 

2QAAA^Aj^AA|^|^|^|gQy^gAAAA^AAj^j^2j^gAAAAj^AAj^|pQjj Searchlight Pictures^N'W^I 

URL AAAA D AA |<|www .foxsearchlight .com AAAA R AA (<|Open A U A http://www.foxsearch 
light.<»n^/index.htm^R AA |>^^ 
URL AAAA D AA |<[intel.corn AAAA R A ^ 
30 Buy AAAA D AA J^|T3pe AAAA D AA |^|$ j 4,95 AAAA D AA |^jPurchaseNow A B A ovenide' > ^N A R AA ^J 
>jDVD AAAA I^^| A ^ 

When the MDN string has been retrieved from the sequencer DSO, a message 
can be displayed to the user indicating that the pop-up menu is being built (step 

35 1604). The MDN string is passed to a pop-up engine (step 1606). The pop-up engine 
constructs a multidimensional array. This array can be interpreted by a pop-up menu 
builder to construct an HTML pop-up array. The pop-up engine parses each string 
section (step 1610) by searching for the menu item delimiter. If the delimited string 
contains a down-control character, the pop-up engine tests for the existence of a lower 

40 menu level (step 1614), If the lower menu already exits, then it is selected (step 

1616). Otherwise a new menu level is built (step 1618). Similarly, if the up control 
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character is found, then a pop-up engine tests for existence of a higher menu level 
(step 1624). If the higher menu level already exists, then that menu level is selected 
(step 1626). Otherwise, a new menu level is built (step 1628). If the delimited string 
contains neither an up nor a down control character, then the data in the string is 
5 parsed (step 1 632). When the pop-up engine has reached the end of the string (step 
1 634), the array is passed to the pop-up menu builder which constructs an HTML 
menu from the array and writes the new HTML to the document. 

When the mail feature is activated, the user's ID and an identification of the 
currently selected play list are written to an electronic mail table record in the user 
1 0 database. A window is opened to present a standard ASP form to receive information 
about the recipient, e.g., the recipient's electronic mail address. When the electronic 
mail is sent, the fields from the ASP form are inserted into the electronic mail table 
record, the body of the electronic mail is written, and the mail is formatted with a 
New Mail Active Messaging Component and passed to an NT SMTP service. The 
1 5 NT SMTP service connects to a remote domain mail server account, and passes the 
outbound mail for delivery. When the recipient selects the delivered electronic mail, 
the displayed text will include a button linking to a mail query ASP form on the 
server. When the button is selected, a browser is launched and connects to the server. 
The server determines the browser configuration to see if it is capable of playing the 
20 media objects in the play list and and capable of creating and operating a sequential 
player. If the browser is capable of playing the media objects, an HTML page is 
assembled appropriate to the browser configuration to display the media icons from 
the mailed play list. However, the server may be configured to return a play list that 
includes only the currently valid media objects so that when the recipient chooses to 
25 play the media objects, bad links will be avoided. The electronic mail recipient may 
then play the media objects. 

The invention has been described in terms of a particular embodiment. Other 
embodiments are within the scope of the following claims. For example, although the 
application has discussed web pages that are accessed though the Internet, the 
30 invention is generally applicable to other client-server arrangements, such as an 

Intranet, where the client runs a viewer program and the server delivers an electronic 
document the client. 
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WHAT IS CLAIMED IS: 

1 . A web page, comprising: 

a player for playing media objects; 
5 a sequencer which displays a play list that defines an order in which media 

objects are played by the player; and 

a media access area for containing a plurality of graphical icons, each 
graphical icon representing a media object, wherein the graphical icons can be 
manipulated by a user to modify the play list. 
10 2. . The web page of claim 1 , wherein the graphical icon includes an indication of 
a media type of the media object. 

3 . The web page of claim 2, wherein the graphical icon further includes text 
describing content of the graphical object. 

4. The web page of claim 1 , wherein a graphical icon can be dragged from the 
1 5 media access area to the sequencer to add the media object represented by the 

graphical icon to the play list. 

5. The web page of claim 1 , wherein the sequencer can display one of multiple 
play lists. 

6. The web page of claim 5, wherein the sequencer includes a tab for each play 
20 list, and the user can select one of the tabs to switch between play lists. 

7. The web page of claim 1 , wherein the sequencer includes a play list box 
containing copies of the graphical icons representing each graphical object in the play 
list. 

8. The web page of claim 7, wherein the sequencer includes a checkbox for each 
25 graphic object in the play list, the checkbox controlling whether the player will play 

the graphic object. 

9. The web page of claim 7, wherein the sequencer includes a pop-up menu for 
each graphic object in the play list, each pop-up menu providing information about 
the graphic object. 

30 1 0. The web page of claim 1 , wherein the sequencer and media access area are 
implemented with scripted DHTML. 

11. The web page of claim 1 , wherein the media access area includes an outline of 
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subjects and the media icons are arranged in lists in the outline. 

12. The web page of claim 1 1 , wherein at least one level of the outline is 
expandable and collapsible. 

1 3 . The web page of claim 1 1 , wherein the media access area includes a tab for 
each subject at a top level of the outline, and the user can switch between subjects by 
selecting a one of the tabs. 

14. The web page of claim 1 1, wherein the media access area displays one of a 
plurality of outlines. 

1 5 . The web page of claim 1 4, wherein the media access area includes a tab for 
each outline in the plurality of outlines, and the user can switch between outlines by 
selecting a one of the tabs. 

1 6. The web page of claim 1 , wherein the player includes a control panel and an 
image display window. 

1 7. The web page of claim 1 6, wherein the image display window can be dragged 
across web page. 

18. The web page of claim 1 7, wherein the image display window includes a 
home button to return the image display window to a home position on the web page. 

1 9. The web page of claim 1 6, wherein the image display window includes an 
image area and a handle, and the handle includes a button to hide the image area. 

20. The web page of claim 16, wherein the image display window includes a size 
lock button to prevent the image display window from expanding beyond a default 
size. 

2 1 . The web page of claim 1 , farther comprising a site-driven area to display a 
banner. 

22. The web page of claim 2 1 , wherein the banner is synchronized with the media 
object being played by the player. 

23. The web page of claim 2 1 , farther comprising a media object associated with 
the banner. 

24. The web page of claim 23, Wherein the user can change the play list to play 
the media object associated with the banner by manipulating the banner. 

25. The web page of claim 24, wherein the user can drag the banner to the 
sequencer to add the media object associated with the banner to the play list. 
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26. The web page of claim 24, wherein the user can drag the banner to an image 
area of the player to play the media object associated with the banner. 

27. The web page of claim 23, wherein the banner includes a pop-up menu to 
display information about the media object associated with the banner. 

5 28. A method of operating a web page, comprising: 

displaying multiple sources of streaming content to a user; 
receiving user input to select a playing order for the sources of streaming 
content; 

storing the playing order; 
1 0 receiving user input to start delivering the streaming content to the user; and 

presenting the streaming content to the user in the stored order. 

29. An Internet site, comprising; 

a first database to store information about a plurality of media objects; 
a second database to store information about how the media objects are to be 
1 5 presented on a web page; 

a third database to store information about a plurality of users; and 

an application server for communicating with a client running the web page. 

30. A graphical user interface, comprising: 
a player for playing media objects; 

20 a sequencer which displays a play list that defines an order in which media 

objects are played by the player; and 

a media access area for containing a plurality of graphical icons, each 
graphical icon representing a media object, wherein the graphical icons can be 
manipulated by a user to modify the play list. 
25 31. An article of computer readable media having instructions for causing a 
computer to display a graphical user interface, comprising: 
a player for playing media objects; 

a sequencer which displays a play list that defines an order in which media 
objects are played by the player; and 
30 a media access area for containing a plurality of graphical icons, each 

graphical icon representing a media object, wherein the graphical icons can be 
manipulated by a user to modify the play list. 
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